<template>
	<view>
		<view class="wid-100 white-bj pad-t-30 pad-b-30">
			<!-- banner -->
			<view class="center banner border-r-20 overflow-hidden" v-if="cate[0].pic!=''"><image :src="cate[0].pic" mode="widthFix"  lazy-load></image></view>
			<!-- 分类 -->
			<view class="center overflow-hidden mar-top30">
				<scroll-view scroll-x="true" class="cate-box box-sizing">
					<block v-for="(item,index) in cateList" :key="index">
						<view class="d-inline-block item-cate position-relative border-r-10 overflow-hidden" @tap="open('newsCate',item.id)">
							<view><image :src="item.pic" mode="widthFix" lazy-load></image></view>
							<!-- <view class="position-absolute p-bottom p-left p-right p-top black100-50 d-a-j-c">
								<view class="font-26 white-zt wen">{{item.name}}</view>
							</view> -->
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 文章列表 -->
		<view class="wid-100 white-bj mar-top20 pad-t-40 pad-b-40">
			<view class="center news-box">
				<view class="item-list" v-for="(item,index) in Articlelist" :key="index" @tap="open('news',item.id)">
					<view class="font-28 text-overflow">{{item.name}}</view>
					<view class="font-22 black60-zt mar-top20 text-overflow">{{item.subname}}</view>
					<view class="border-r-15 overflow-hidden mar-top20"><image :src="item.pic" mode="widthFix" lazy-load></image></view>
				</view>
			</view>
		</view>
		<!-- 自动定义导航 -->
		<m-tabbar-item :tabIndex="tabIndex"></m-tabbar-item>
	</view>
</template>

<script>
	import mTabbarItem from "@/components/m-tabbar-item.vue"
	export default {
		components:{
			mTabbarItem
		},
		data() {
			return {
				tabIndex:2,
				cate:[],
				cateList:[],
				Articlelist:[]
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.GetArticleList()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//获取文章list
			async GetArticleList(){
				const one={
					aid:1,
					id:6
				}
				await this.$api.GetArticleCategoryList(one).then(res=>{
					this.cate=res.data.list
				})
				await this.$api.ArticleCategoryList(one).then(res=>{
					this.cateList=res.data.list
				})
				const two={
					aid:1,
					gid:6,
					page:1,
					limit:10
				}
				await this.$api.ArticleList(two).then(res=>{
					this.Articlelist=res.data.list
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.banner{
		height: 220rpx;
	}
	.cate-box{
		white-space: nowrap;
		width: 100%;
		.item-cate{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			&:last-child{
				margin-right: 0rpx;
			}
		}
	}
	.item-list{
		margin-bottom: 40rpx;
		&:last-child{
			margin-bottom: 0rpx;
		}
	}
</style>
